<template>
  <div class="box">
    <el-input
      v-model="text"
      :rows="3"
      style="width: 500px"
      type="textarea"
      placeholder="您宝贵的建议，是我前进的动力....."
    />
    <el-button class="top" @click="submitAdd">添加用户反馈</el-button>

    <el-divider>
      <el-icon><star-filled /></el-icon>
    </el-divider>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" label="序号" width="100px">
        <template #default="scoped">
          <span>{{ scoped.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" align="center" label="日期" width="200px" />
      <el-table-column
        prop="content"
        align="center"
        label="内容"
        width="800px"
      />
      <el-table-column prop="operation" align="center" label="操作">
        <template #default="scoped">
          <!-- <el-button size="small" type="warning" :icon="Edit"></el-button> -->
          <el-button
            size="small"
            type="danger"
            @click="del(scoped.row.id)"
            :icon="Delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useUserStore } from "../../store/user";
import { getUserFeedback } from "../../api/feedback";
const route = useRoute();
const { userid } = useUserStore();
const tableData = ref([]);
const text = ref<string>("");
const getFeedback = async () => {
  console.log(userid);
  
  let res = await getUserFeedback({userid});
  console.log(res, "详情");
  tableData.value = res.data;
};

onMounted(() => {
  getFeedback();
});
// 删除

const del = async (id: any) => {
  console.log(id);

  ElMessageBox.confirm("确定删除", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((res) => {
      console.log(res, "aa");
      axios({
        url: `http://192.168.20.170:3000/feedback/${id}`,
        method: "delete",
      }).then((res) => {
        console.log(res);
      });

      getFeedback();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
//添加
const getNowDate = () => {
  const timeOne = new Date();
  const year = timeOne.getFullYear();
  let month: any = timeOne.getMonth() + 1;
  let day: any = timeOne.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  const NOW_MONTHS_AGO = `${year}-${month}-${day}`;
  return NOW_MONTHS_AGO;
};
const submitAdd = async () => {
  if (text.value) {
    axios({
      url: "http://192.168.20.170:3000/feedback",
      method: "post",
      data: {
        // userid: store.userid,
        userid: userid,
        date: getNowDate(),
        content: text.value,
      },
    })
      .then((res) => {
        getFeedback();
      })
      .catch((err) => {});
  } else {
    alert("内容不能为空");
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin-top: 20px;
  .top {
    padding: 20px;
    margin-left: 20px;
  }
}
</style>
